<script setup>
import ClockWidget from '@/components/studyRoom/ClockWidget.vue'
import Calculator from '@/components/studyRoom/CalculatorComponent.vue'
import TranslateWidget from "@/components/studyRoom/TranslateWidget.vue";
import ToDoComponent from '@/components/studyRoom/ToDoComponent.vue'
import DailyQuotes from "@/components/studyRoom/DailyQuotes.vue";
import CalendarComponent from "@/components/studyRoom/CalendarComponent.vue";
import BottomWidget from "@/components/studyRoom/BottomWidget.vue";
import TeacherHelp from "@/components/studyRoom/TeacherHelp.vue";

import {useStudyRoomStore} from "@/stores/index.js";
import { computed, onMounted,ref } from "vue";

// ---------------------------控制各组件的开启（没有关闭功能）----------------------------
const store = useStudyRoomStore();

//----------------------------修改背景图功能----------------------------
const background = ref('')
// 查看本地存储，修改背景图片
const bgStyle = computed(() => {
  background.value = localStorage.getItem('background');
  if (background.value) {
    console.log('更换背景');
    return {
      backgroundImage: `url(${background.value})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      backgroundRepeat: 'no-repeat'
    };
  } else {
    return {};
  }
});
onMounted( ()=>{
  console.log('加载页面')
})

</script>

<template>
  <div class="study-room-page" :style=" bgStyle ">
    <!-- 靠左摆放 -->
    <div style="float: left">
      <!--  每日一句  -->
      <DailyQuotes></DailyQuotes>

      <!--  翻译  -->
      <TranslateWidget v-if="store.widgetSwitch.translate"></TranslateWidget>

      <!--  ToDu组件   -->
      <ToDoComponent v-if="store.widgetSwitch.toDo"></ToDoComponent>

      <!--   日历   -->
      <CalendarComponent v-if="store.widgetSwitch.calendar"></CalendarComponent>
    </div>

    <!--  靠右摆放  -->
    <div style="float: right">
      <!--  时钟  -->
      <ClockWidget></ClockWidget>

      <!--  计算器  -->
      <Calculator v-if="store.widgetSwitch.calculator"></Calculator>
    </div>

    <!--  靠下摆放  -->
    <BottomWidget></BottomWidget>

    <!--  居中摆放  -->
    <TeacherHelp v-if="store.widgetSwitch.teacher"></TeacherHelp>

  </div>
</template>

<style scoped lang="scss">

.study-room-page {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/img/studyRoomBackground.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
</style>
